<template>
	<div class="boxStyle">
		<el-row type="flex" class="row-bg" justify="start" style="margin-bottom: 10px;">
			<el-col :span="1" style="margin-top: 5px;padding-left: 5px;">微信昵称:</el-col>
			<el-col :span="2">
				<el-input v-model="sName" size="small"></el-input>
			</el-col>
			<el-col :span="1" style="margin-top: 5px;padding-left: 10px;">手机号 :</el-col>
			<el-col :span="3" style="margin-right: 10px;">
				<el-input v-model="sPhone" size="small"></el-input>
			</el-col>
			<el-col :span="1" style="margin-top: 5px;margin-left:10px;">上级姓名 :</el-col>
			<el-col :span="2">
				<el-input v-model="dismobile" size="small"></el-input>
			</el-col>
			<el-col :span="1" style="margin-top: 5px;padding-left: 5px;">注册时间: </el-col>
			<el-col :span="6" style="margin-top: -3px;">
				<el-date-picker v-model="stime" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
			</el-col>
			<el-col :span="1" style="margin-right:30px;margin-left:80px;">
				<el-button type="warning" icon="el-icon-search" size="small" @click="search">查找</el-button>
			</el-col>
		</el-row>
		<el-table :data="tableData" border style="width:100%" class="table-fixed">
			<el-tableref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column prop="id" label="ID" width="70"></el-table-column>
				<el-table-column prop="mobile" label="手机号" width="120"></el-table-column>
				<el-table-column prop="openId" label="openID" width="200"></el-table-column>
				<el-table-column prop="nickName" label="微信昵称" width="160">
					<template slot-scope="scope"><img :src="scope.row.avatar" style="width: 30px;height: 30px;"></br><label>{{scope.row.nickName}}</label></template>
				</el-table-column>
				<el-table-column prop="orderCount" label="商城成交量" width="150"></el-table-column>
				<el-table-column prop="moneyCount" label="商城成交总价" width="150"></el-table-column>
				<el-table-column prop="createTime" label="注册时间" width="180" :formatter="dateFormat"></el-table-column>
				<el-table-column prop="puid" label="上级ID" width="65"></el-table-column>
				<el-table-column prop="disname" label="上级姓名"></el-table-column>
		</el-table>
		<el-pagination background @current-change="handleCurrentChange" :current-page="currentPage" :page-size="size" layout="prev, pager, next,total, slot" :total="totals">
			<span style="margin-top: -2px;color: #606266;font-weight: 100;">第<el-input type="text" v-model="inputPage" style="width: 60px;margin: 0 5px;"/>页<el-button size="mini" style="background: #409EFF; color: #fff;margin:0 5px;" @click="handleCurrentChange(inputPage)">跳转</el-button><span>总计{{totalPage}}页</span></span>
		</el-pagination>
	</div>
</template>

<script>
	import { formatDate } from 'static/js/date.js'
	import qs from "qs"
	import axios from "axios"
	export default {
		data() {
			return {
				tableData: [],
				totals: 0, //分页总条数
				size: 0, //每页条数
				inputPage: 1,
				totalPage: 1,
				currentPage: 1,
				expShow: 0,
				purl: this.$store.state.purl, //权限数组
				stime: [], //开始时间
				etime: null, //结束时间
				sName: "", //搜索姓名
				sPhone: "", //搜索手机号
				isDisabled: false,
				dismobile: "",
			}
		},
		activated() {
			this.currentPage = 1;
			this.inputPage = 1;
			this.sName = "";
			this.sName = ""; //搜索姓名
			this.sPhone = ""; //搜索手机号
			this.stime = [];
			this.load(1);
			this.expShow = this.purl[0].findIndex((val) => val === "/interface/user/list")
		},
		methods: {
			load(num) {
				axios.get("/interface/user/list?pageNo=" + num).then((res) => {
					this.tableData = res.data.data.list; //list数据
					this.totals = res.data.data.pageBean.totalRow; //总条数
					this.size = res.data.data.pageBean.pageSize; //每页条数
					this.totalPage = res.data.data.pageBean.totalPage; //总页数
				})
			},
			dateFormat: function(row, column) {
				var date
				if(row[column.property]) {
					date = new Date(parseInt(row[column.property]))
					date = formatDate(date, 'yyyy-MM-dd hh:mm:ss')
				}
				if(date == undefined) {
					return "";
				}
				return date;
			},
			handleCurrentChange(val) {
				this.currentPage = val - 0;
				this.inputPage = val;
				var startTime;
				var endTime;
				if(this.stime != null && this.stime.length > 0) {
					startTime = formatDate(this.stime[0], 'yyyy-MM-dd hh:mm:ss');
					endTime = formatDate(this.stime[1], 'yyyy-MM-dd hh:mm:ss');
				} else {
					startTime = "";
					endTime = "";
				}
				axios.post("/interface/user/list?", qs.stringify({
					nickName: this.sName,
					mobile: this.sPhone,
					stime: startTime,
					etime: endTime,
					dismobile: this.dismobile,
					pageNo: val
				})).then((res) => {
					this.tableData = res.data.data.list; //list数据
					this.totals = res.data.data.pageBean.totalRow; //总条数
					this.size = res.data.data.pageBean.pageSize; //每页条数
					this.totalPage = res.data.data.pageBean.totalPage; //总页数
				})
			},
			search() {
				/*var timeList=.split(",");*/
				var startTime;
				var endTime;
				if(this.stime != null && this.stime.length > 0) {
					startTime = formatDate(this.stime[0], 'yyyy-MM-dd hh:mm:ss');
					endTime = formatDate(this.stime[1], 'yyyy-MM-dd hh:mm:ss');
				} else {
					startTime = "";
					endTime = "";
				}
				axios.post("/interface/user/list?", qs.stringify({
					nickName: this.sName,
					mobile: this.sPhone,
					stime: startTime,
					dismobile: this.dismobile,
					etime: endTime,
					pageNo: 1
				})).then((res) => {
					this.tableData = res.data.data.list; //list数据
					this.totals = res.data.data.pageBean.totalRow; //总条数
					this.size = res.data.data.pageBean.pageSize; //每页条数
					this.totalPage = res.data.data.pageBean.totalPage; //总页数
				})

			},
			userExport() {
				var that = this;
				this.isDisabled = true;
				var startTime;
				var endTime;
				if(this.stime != '') {
					startTime = formatDate(this.stime[0], 'yyyy-MM-dd hh:mm:ss');
					endTime = formatDate(this.stime[1], 'yyyy-MM-dd hh:mm:ss');
				} else {
					startTime = "";
					endTime = "";
				}
				axios.get('/interface/user/spExcel', {
					params: {
						"userName": this.sName,
						"userMobile": this.sPhone,
						"stime": startTime,
						"etime": endTime
					},
					responseType: 'arraybuffer'
				}).then((response) => {
					//创建一个blob对象,file的一种
					let blob = new Blob([response.data], {
						type: 'application/x-xls'
					})
					let link = document.createElement('a')
					link.href = window.URL.createObjectURL(blob)
					link.download = '用户数据.xls'
					link.click();
					that.isDisabled = false;
				})
			},
		}
	}
</script>

<style>
	.el-date-range-picker {
		z-index: 10052 !important;
	}
	
	.el-cascader-menus {
		z-index: 10056 !important;
	}
	
	.el-notification {
		z-index: 10056 !important;
	}
</style>